<template>
  <!-- 我的订单 -->
  <div class="order">
    <div class="van-top">
      <van-nav-bar title="我的订单" left-arrow @click-left="onClickLeft" />
    </div>
    <van-tabs v-model:active="active">
      <van-tab title="全部订单" class="allOrder">
        <van-card
          style="font-size: 14px"
          v-for="item in orderData.list"
          :key="item.id"
          :price="formatMoney(item.price)"
          :origin-price="item.originPrice"
          title="UI设计全进阶教程(名师课程)"
          :thumb="item.image"
        >
          <template #footer>
            <van-button
              size="small"
              color="#FF6262"
              v-if="item.status === '未支付'"
              >立即支付</van-button
            >
            <h4 v-else>{{ item.status }}</h4>
          </template>
        </van-card>
        <van-divider>我也是有底线的</van-divider>
      </van-tab>

      <van-tab title="待支付">
        <van-card
          style="font-size: 14px"
          v-for="item in noPayDataList"
          :key="item.id"
          :price="formatMoney(item.price)"
          :origin-price="item.originPrice"
          title="UI设计全进阶教程(名师课程)"
          :thumb="item.image"
        >
          <template #footer>
            <van-button
              size="small"
              color="#FF6262"
              v-if="item.status === '待支付'"
              @click="$router.push('/confirm')"
              >立即支付</van-button
            >
          </template>
        </van-card>
        <van-divider>我也是有底线的</van-divider>
      </van-tab>

      <van-tab title="已完成">
        <van-card
          style="font-size: 14px"
          v-for="item in finishDataList"
          :key="item.id"
          :price="formatMoney(item.price)"
          :origin-price="item.originPrice"
          title="UI设计全进阶教程(名师课程)"
          :thumb="item.image"
        >
          <template #footer>
            <van-button size="small" v-if="item.status === '已完成'"
              >已完成</van-button
            >
          </template>
        </van-card>
        <van-divider>我也是有底线的</van-divider>
      </van-tab>

      <van-tab title="已关闭">
        <van-card
          style="font-size: 14px"
          v-for="item in closeDataList"
          :key="item.id"
          :price="formatMoney(item.price)"
          :origin-price="item.originPrice"
          title="UI设计全进阶教程(名师课程)"
          :thumb="item.image"
        >
          <template #footer>
            <van-button size="small" v-if="item.status === '已关闭'"
              >已关闭</van-button
            >
          </template>
        </van-card>
        <van-divider>我也是有底线的</van-divider>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'order',
  data() {
    return {
      active: '',
      orderData: {},
      noPayDataList: [],
      finishDataList: [],
      closeDataList: [],
    }
  },
  created() {
    axios
      .get('/mock/api/order')
      .then((mockData) => {
        this.orderData = mockData.data.data
      })
      .catch(console.error)
    axios
      .get('/mock/api/order')
      .then((mockData) => {
        this.noPayDataList = mockData.data.noPay.list
      })
      .catch(console.error)
    axios
      .get('/mock/api/order')
      .then((mockData) => {
        this.finishDataList = mockData.data.finish.list
      })
      .catch(console.error)
    axios
      .get('/mock/api/order')
      .then((mockData) => {
        this.closeDataList = mockData.data.close.list
      })
      .catch(console.error)
  },
  methods: {
    formatMoney(val) {
      return Number(val).toFixed(1)
    },
    onClickLeft() {
      this.$router.push('/user')
    },
    toConfirm(item) {
      this.$router.push({
        path: '/confirm',
        query: {
          price: item.item.price,
          id: item.item.id,
          originPrice: item.item.originPrice,
          title: item.item.title,
        },
      })
    },
  },
}
</script>

<style scoped>
.order {
  background: #f2f2f2;
}
.van-top /deep/ .van-nav-bar__title {
  font-size: 18px;
  font-weight: bold;
}
.van-top /deep/ .van-nav-bar .van-icon {
  color: black !important;
}

.van-tab /deep/ .van-card title {
  font-size: 40px;
}
</style>
